<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <title>Booking Resource API</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
</head>

<body ng-app="app">
    <div ng-controller="appController">
        <div class="topMain">
            <div class="container">
                <h1>Booking Resource API</h1>
                <p></p>
                <h2>资源预定管理API接口</h2>
                <p>说明：本说明文档，前端事例代码都使用angular.js调用，其默认的Content-Type: application/json;charset=utf-8</br>
                    在没有明确指出Content-type,其默认都是：Content-Type: application/json;charset=utf-8
                </p>
                <p>
                    如若使用jquery，请更改文件内部的contentType:application/json;charset=utf-8，并序列化提交数据,如</br>

                    $.post("/admin/testByClient",JSON.stringify(Jsondata),function(response){</br>
                    alert(JSON.stringify(response));</br>
                    });</br>
                </p>
            </div>
        </div>

        <div class="container" style="margin-top:10px;margin-bottom: 30px;">
            <div class="row">
                <div class="col-xs-3" ng-click="menu.activeID='sign'">
                    <div class="jumbotron myjumbotron" ng-class="{'active':menu.activeID=='sign'}">
                        <h1 class="glyphicon glyphicon-lock"></h1>
                        <span>登录注销</span>
                    </div>
                </div>
                <div class="col-xs-3" ng-click="menu.activeID='user'">
                    <div class="jumbotron myjumbotron" ng-class="{'active':menu.activeID=='user'}">
                        <h1 class="glyphicon glyphicon-user"></h1>
                        <span>用户注册</span>
                    </div>
                </div>
                <div class="col-xs-3" ng-click="menu.activeID='resource'">
                    <div class="jumbotron myjumbotron" ng-class="{'active':menu.activeID=='resource'}">
                        <h1 class="glyphicon glyphicon-home"></h1>
                        <span>资源接口</span>
                    </div>
                </div>
                <div class="col-xs-3" ng-click="menu.activeID='booking'">
                    <div class="jumbotron myjumbotron" ng-class="{'active':menu.activeID=='booking'}">
                        <h1 class="glyphicon glyphicon-ok"></h1>
                        <span>预定接口</span>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-3">
                    <div ng-class="{'triangle-up':menu.activeID=='sign'}"></div>
                </div>
                <div class="col-xs-3">
                    <div ng-class="{'triangle-up':menu.activeID=='user'}"></div>
                </div>
                <div class="col-xs-3">
                    <div ng-class="{'triangle-up':menu.activeID=='resource'}"></div>
                </div>
                <div class="col-xs-3">
                    <div ng-class="{'triangle-up':menu.activeID=='booking'}"></div>
                </div>
                <div style="border:2px solid #04961a;height: 0px;margin-top:14px;"></div>
            </div>


            <div ng-include="'html_modules/sign.html'"></div>
            <div ng-include="'html_modules/user.html'"></div>
            <div ng-include="'html_modules/resource.html'"></div>
            <div ng-include="'html_modules/booking.html'"></div>

        </div>

        <!-- Modal  add rollimage -->
        <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="myModalLabel">图片上传</h4>
                    </div>
                    <div class="modal-body" style="text-align:center;">
                        <iframe id="uploadFrame" src="" width="400" height="240" style="border:0px;"></iframe>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-success" ng-click="endupload()">关闭</button>
                    </div>
                </div>
            </div>
        </div>


    </div>

    <script type="text/javascript" src="js/jquery-2.2.1.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/angular.js"></script>

    <script type="text/javascript">
        var app = angular.module('app', []);
        angular.module('app').controller('appController', function ($scope, $http) {
            $scope.endupload = function () {
                $('#addModal').modal('hide');
            }




            $scope.menu = {};
            $scope.menu.activeID = "sign";
            //sign info
            $scope.signState = 0;
            $scope.signUser = {};
            if (window.localStorage.user != null && window.localStorage.user != "") {
                $scope.signUser = JSON.parse(window.localStorage.user);
                $scope.signState = 1;
            }

            $scope.login = {};
            $scope.login.account = "";
            $scope.login.password = "";
            $scope.sign = function () {
                var requrl = "/user/sign";
                var Jsondata = $scope.login;
                $http.post(requrl, Jsondata).success(function (response) {
                    alert(response.message);
                    if (response.result) {
                        window.localStorage.user = JSON.stringify(response.data);
                        $scope.signUser = response.data;
                        $scope.signState = 1;
                    }
                });
            }

            $scope.signOut = function () {
                var requrl = "/user/signOut?token=" + $scope.signUser.token;
                var Jsondata = $scope.user;
                $http.post(requrl, Jsondata).success(function (response) {
                    window.localStorage.user = "";
                    $scope.signUser = {};
                    $scope.signState = 0;
                });
            }






            //User 模块
            $scope.user = {}

            $scope.user.add = function () {
                var requrl = "/user/add";
                var Jsondata = $scope.user;
                metadata={};
                metadata.a="11";
                metadata.b="testb";
                Jsondata.metadata=metadata;
                console.log(Jsondata);
                $http.post(requrl, Jsondata).success(function (response) {
                    alert(response.message);
                });
            }

            $scope.user.getSignUser = function () {
                var requrl = "/user/getSignUser?token=" + $scope.signUser.token;
                var Jsondata = $scope.user;
                $http.post(requrl, Jsondata).success(function (response) {
                    alert(JSON.stringify(response));
                });
            }



            $scope.user.uploadIcon = function () {
                var url = "../html_modules/upload.html?route=user&action=userIconUp&params=token=" + $scope.signUser.token;
                $("#uploadFrame").attr("src", url);
                $('#addModal').modal({
                    keyboard: true,
                    backdrop: "static"
                });
            }
            
             $scope.user.getIcon = function () {
                var requrl = "/user/getIcon?token=" + $scope.signUser.token;
                var Jsondata = $scope.user;
                $http.post(requrl, Jsondata).success(function (response) {
                    alert(response);
                });
            }


           $scope.user.invokeProcData = function () {
                var requrl = "/user/invokeProcData?token=" + $scope.signUser.token;
                var Jsondata = $scope.user;
                $http.post(requrl, Jsondata).success(function (response) {
                    alert(response);
                });
            }
            

        });
    </script>

</body>

</html>